<template>
  <section class="xmv-badges xmv-wrap">
    <h4>popup</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <xm-popup v-model="popupVisible2" position="top" class="xm-popup-2" :modal="false">
        <p>更新成功</p>
      </xm-popup>

      <xm-popup v-model="popupVisible1" popup-transition="popup-fade" class="popup__wrapper">
        <span class="close" @click="closeIdcardInfo"></span>
        <div class="popup__rbox">
          <header class="popup__header">
            <h2>请根据行驶证填写车辆识别码/车架号、发动机号。</h2>
          </header>
          <section class="popup__content">
            <img src="../../images/car_details.png" alt="">
          </section>
        </div>
      </xm-popup>
      <button type="button" class="c-button" @click="onOpen">更新</button>
      <button type="button" class="c-button" @click="onOpenCard">行驶证</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltxm-popup v-model="popupVisible2" position="top" class="xm-popup-2" :modal="false"&gt
  &ltp&gt更新成功&lt/p&gt
&lt/xm-popup&gt

&ltxm-popup v-model="popupVisible1" popup-transition="popup-fade" class="popup__wrapper"&gt
  &ltspan class="close" @click="closeIdcardInfo"&gt&lt/span&gt
  &ltdiv class="popup__rbox"&gt
    &ltheader class="popup__header"&gt
      &lth2>请根据行驶证填写车辆识别码/车架号、发动机号。&lt/h2&gt
    &lt/header&gt
    &ltsection class="popup__content"&gt
      &ltimg src="../../images/car_details.png" alt=""&gt
    &lt/section&gt
  &lt/div&gt
&lt/xm-popup&gt

export default {
  data() {
    return {
      popupVisible1: false,
      popupVisible2: false,
    };
  },
  methods: {
    onOpen() {
      this.popupVisible2 = true;
    },
    onOpenCard() {
      this.popupVisible1 = true;
    },
    closeIdcardInfo() {
      this.popupVisible1 = false;
    },
  },
  watch: {
    popupVisible2(val) {
      if (val) {
        setTimeout(() => {
          this.popupVisible2 = false;
        }, 2000);
      }
    }
  }
};
        </code>
      </pre>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      popupVisible1: false,
      popupVisible2: false,
    };
  },
  methods: {
    onOpen() {
      this.popupVisible2 = true;
    },
    onOpenCard() {
      this.popupVisible1 = true;
    },
    closeIdcardInfo() {
      this.popupVisible1 = false;
    },
  },
  watch: {
    popupVisible2(val) {
      if (val) {
        setTimeout(() => {
          this.popupVisible2 = false;
        }, 2000);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.xm-popup-2 {
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
  backface-visibility: hidden;
  color: #fff;
  p {
    text-align: center;
  }
}


.popup__wrapper {
  width: 100%;
}

// 行驶证
.popup__wrapper {
  top: 50%;
  left: 50%;
  width: 90%;
  border-radius: .2rem;
  padding: 0 .3rem;
  transform: translate(-50%, -50%);
}

.popup__rbox {
  padding: .3rem;
  background: #fff;
  border-radius: 8px;
  .popup__header {
    font-size: .28rem;
    position: relative;
    .close {
      font-size: .3rem;
      position: absolute;
      right: 0rem;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
    }
  }
  h2 {
    line-height: .4rem;
    font-size: .26rem;
  }
  .popup__content {
    padding-top: .3rem;
    img{
      width: 100%;
      height: auto;
    }
  }
}

.popup__wrap {
  top: 50%;
  left: 50%;
  width: 86%;
  border-radius: 6px;
  // padding: 0 .3rem;
  transform: translate(-50%, -50%);
  background: #fff;
  position: fixed;
  transition: 0.2s ease-out;
  z-index: 100;
}


.close {
  position: absolute;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: .45rem;
  height: .45rem;
  background: #000 url(../../images/close.png)  center center no-repeat;
  background-size: 55% auto;
  /* padding: 1.1rem; */
  border-radius: 2rem;
  left: 96%;
  border: 1px solid #fff;
}
.popup__rbox {
  padding: 0.3rem;
  background: #fff;
  border-radius: 8px;
  position: relative;

  .popup__header {
    font-size: 0.28rem;
    position: relative;
    line-height: 0.4rem;
    min-height: .2rem;

  }
  h2 {
    line-height: 0.4rem;
    font-size: 0.26rem;
  }
  .popup__content {
    padding-top: 0.3rem;
    input {
      border: 1px solid #eee;
      margin-top: 0.2rem;
      width: 100%;
      font-size: 0.26rem;
      line-height: 0.26rem;
      height: 0.65rem;
      border-radius: 3px;
      text-indent: 0.2rem;
    }
    p {
      font-size: .28rem;
      line-height: 1.5;
      padding-left: .2rem;
    }
    .popup__code {
      display: flex;
      align-items: center;
      padding: .1rem 0;
      input {
        width: 40%;
        margin-top: 0;
      }
      img {
        width: 30%;
        height: .65rem;
        margin-left: .2rem;
      }
      & + p {
        .hyih {
          color: #4a90e2;
        }
        .to {
          color: #fe5958;
        }
      }
    }
  }
  .submit {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.32rem;
    padding: 0.2rem 0;
    background: #ddd;
    border-radius: 3px;
    text-align: center;
    background: #fe5958;
    color: #fff;
  }
  footer {
    font-size: 0.28rem;
    margin-top: 0.2rem;
    p {
      color: #999;
      line-height: 0.32rem;
    }
  }
}



.c-header-back {
  width: 0.14rem;
  height: 0.14rem;
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>